<template>
  <div class="swiper-box">
    <div class="baseline"></div>
    <div class="nav"
         id="nav">
      <div class="navHideBox">
        <div class="yearselect level3">
          <div class="data-left">{{yearData[0].square}}万 平方米</div>
          <div class>{{yearData[0].year+'年'}}</div>
        </div>
        <div class="yearselect level2">
          <div class="data-left">{{yearData[1].square}}万 平方米</div>
          <div class>{{yearData[1].year+'年'}}</div>
        </div>
        <div class="yearselect level2">
          <div class="data-left">{{yearData[2].square}}万 平方米</div>
          <div class>{{yearData[2].year+'年'}}</div>
        </div>
        <div class="yearselect level2">
          <div class="data-left">{{yearData[3].square}}万 平方米</div>
          <div class>{{yearData[3].year+'年'}}</div>
        </div>
        <div class="yearselect level1">
          <div class="data-right">{{yearData[4].square}}万 平方米</div>
          <div class>{{yearData[4].year+'年'}}</div>
        </div>
        <div class="yearselect level2">
          <div class="data-right">{{yearData[5].square}}万 平方米</div>
          <div class>{{yearData[5].year+'年'}}</div>
        </div>
        <div class="yearselect level3">
          <div class="data-right">{{yearData[6].square}}万 平方米</div>
          <div class>{{yearData[6].year+'年'}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Bus from "../utils/bus.js"
export default {
  name: "swiper",
  data () {
    return {
      isActive: false,
      // 这个年份地图中用的着
      id: 4,
      moveX: "",
      myX: "",
      yearData: [
        {
          year: 2015,
          square: 2836
        },
        {
          year: 2016,
          square: 3064
        },
        {
          year: 2017,
          square: 3836
        },
        {
          year: 2018,
          square: 4386
        },
        {
          year: 2019,
          square: 4970
        },
        {
          year: 2020,
          square: 5220
        },
        {
          year: 2021,
          square: 5500
        }
      ]
    };
  },
  methods: {
    // 滚轴效果
    moveZhou () {
      var a = document.getElementsByClassName("navHideBox")[0];
      a.onmousedown = e => {
        var e = e || window.event;
        //获取按下的位置
        var h = e.clientY;
        var w = e.clientX;
        //获得是鼠标按下时相对于元素的位置
        var ex = w - a.offsetLeft;
        var ey = h - a.offsetTop;
        document.onmousemove = h => {
          var h = h || window.event;
          var h1 = h.clientY;
          var w1 = h.clientX;
          this.moveX = w1 - ex - 16;
          var nowX = $(".yearselect")
            .css("transform")
            .split(",")[4];
          my = nowX;
          my = parseInt(my);
          this.moveX = parseInt(this.moveX);
          var nowX = this.moveX + my;
          this.myX = nowX;
          $(".yearselect").css("transform", "translateX(" + `${nowX}` + "px)");
        };
      };
      var my = "0";
      window.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }
  },
  mounted () {
    this.moveZhou()
    Bus.$on('reset', () => {
      $(".yearselect").css("transform", "translateX(" + 0 + "px)")
      $(".navHideBox .yearselect:nth-child(2)").attr(
        "class",
        "yearselect level3"
      );
      $(".navHideBox .yearselect:nth-child(3)").attr(
        "class",
        "yearselect level3"
      );
      $(".navHideBox .yearselect:nth-child(4)").attr(
        "class",
        "yearselect level2"
      );
      $(".navHideBox .yearselect:nth-child(5)").attr(
        "class",
        "yearselect level1"
      );
      $(".navHideBox .yearselect:nth-child(6)").attr(
        "class",
        "yearselect level2"
      );
      $(".navHideBox .yearselect:nth-child(7)").attr(
        "class",
        "yearselect level3"
      );
    })
  },
  watch: {
    id: function (e) {
      setTimeout(
        () => { Bus.$emit("mapId", e) }, 1000)
    },
    myX: function (newVal, oldVal) {
      if (newVal > 650) {
        $(".navHideBox .yearselect:nth-child(1)").attr(
          "class",
          "yearselect level1"
        );
        $(".navHideBox .yearselect:nth-child(2)").attr(
          "class",
          "yearselect level2"
        );
        $(".navHideBox .yearselect:nth-child(3)").attr(
          "class",
          "yearselect level3"
        );
        this.id = 0
        $(".yearselect").css({ transform: "translateX(630px)" })
      } else if (newVal > 480 && newVal < 650) {
        $(".navHideBox .yearselect:nth-child(1)").attr(
          "class",
          "yearselect level2"
        );
        $(".navHideBox .yearselect:nth-child(2)").attr(
          "class",
          "yearselect level1"
        );
        $(".navHideBox .yearselect:nth-child(3)").attr(
          "class",
          "yearselect level2"
        );
        $(".navHideBox .yearselect:nth-child(4)").attr(
          "class",
          "yearselect level3"
        );

        this.id = 1
        $(".yearselect").css({ transform: "translateX(470px)" })
      }
      else if (newVal > 350 && newVal < 480) {
        $(".navHideBox .yearselect:nth-child(1)").attr(
          "class",
          "yearselect level3"
        );
        $(".navHideBox .yearselect:nth-child(2)").attr(
          "class",
          "yearselect level2"
        );
        $(".navHideBox .yearselect:nth-child(3)").attr(
          "class",
          "yearselect level1"
        );
        $(".navHideBox .yearselect:nth-child(4)").attr(
          "class",
          "yearselect level2"
        );
        $(".navHideBox .yearselect:nth-child(5)").attr(
          "class",
          "yearselect level3"
        );
        this.id = 2
        $(".yearselect").css({ transform: "translateX(307px)" });
      } else if (newVal > 150 && newVal < 350) {
        $(".navHideBox .yearselect:nth-child(2)").attr(
          "class",
          "yearselect level3"
        );
        $(".navHideBox .yearselect:nth-child(3)").attr(
          "class",
          "yearselect level2"
        );
        $(".navHideBox .yearselect:nth-child(4)").attr(
          "class",
          "yearselect level1"
        );
        $(".navHideBox .yearselect:nth-child(5)").attr(
          "class",
          "yearselect level2"
        );
        $(".navHideBox .yearselect:nth-child(6)").attr(
          "class",
          "yearselect level3"
        );
        this.id = 3
        $(".yearselect").css({ transform: "translateX(147px)" });
      } else if (newVal > -88 && newVal < 70) {
        $(".navHideBox .yearselect:nth-child(3)").attr(
          "class",
          "yearselect level3"
        );
        $(".navHideBox .yearselect:nth-child(4)").attr(
          "class",
          "yearselect level2"
        );
        $(".navHideBox .yearselect:nth-child(5)").attr(
          "class",
          "yearselect level1"
        );
        $(".navHideBox .yearselect:nth-child(6)").attr(
          "class",
          "yearselect level2"
        );
        $(".navHideBox .yearselect:nth-child(7)").attr(
          "class",
          "yearselect level3"
        );
        this.id = 4
        $(".yearselect").css({ transform: "translateX(0px)" });
      } else if (newVal > -243 && newVal < -88) {

        $(".navHideBox .yearselect:nth-child(4)").attr(
          "class",
          "yearselect level3"
        );
        $(".navHideBox .yearselect:nth-child(5)").attr(
          "class",
          "yearselect level2"
        );
        $(".navHideBox .yearselect:nth-child(6)").attr(
          "class",
          "yearselect level1"
        );
        $(".navHideBox .yearselect:nth-child(7)").attr(
          "class",
          "yearselect level2"
        );
        this.id = 5
        $(".yearselect").css({ transform: "translateX(-163px)" });
      } else if (newVal < -243) {
        $(".navHideBox .yearselect:nth-child(5)").attr(
          "class",
          "yearselect level3"
        );
        $(".navHideBox .yearselect:nth-child(6)").attr(
          "class",
          "yearselect level2"
        );
        $(".navHideBox .yearselect:nth-child(7)").attr(
          "class",
          "yearselect level1"
        );
        this.id = 6
        $(".yearselect").css({ transform: "translateX(-318px)" });
      }


    }
  }
};
</script>
<style lang="scss">
$precent: 100vw / 1920;
.swiper-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100 * $precent;
  text-align: center;
  overflow: hidden;

  .baseline {
    position: absolute;
    top: 54 * $precent;
    width: 840 * $precent;
    height: 5 * $precent;
    background: -webkit-linear-gradient(left, #fff -4%, #2473fb 50%, #fff 100%);
    z-index: -1;
  }
  .nav {
    position: absolute;
    top: 15 * $precent;
    width: 962 * $precent;
    height: 100%;
    z-index: 10;
    font-size: 16 * $precent;
    background: url("../../static/image/时间轴.png") no-repeat;
    background-size: 100% 100%;
    font-style: italic;
    cursor: move;
    user-select: none;

    //  -moz-user-select: none; /*火狐*/
    //  -webkit-user-select: none; /*webkit浏览器*/
    //  -ms-user-select: none; /*IE10*/
    //  -khtml-user-select: none; /*早期浏览器*/
    //  user-select: none;
    .navHideBox {
      width: 933 * $precent;
      height: 100%;
      // margin-left: 16*$precent;
      left: 15 * $precent;
      position: relative;
      overflow: hidden;

      .yearselect {
        position: absolute;
        // width: 100*$precent;
        // height: 100%;
        // display: none;
        // left: 90*$precent;
        // transition: 1s;
        // z-index: -1;
        transition: 1s;
        transform: translateX(0);
      }
      > div:nth-child(1) {
        left: -230 * $precent;
      }
      > div:nth-child(2) {
        left: -70 * $precent;
      }
      > div:nth-child(3) {
        left: 90 * $precent;
      }
      > div:nth-child(4) {
        left: 250 * $precent;
      }
      > div:nth-child(5) {
        left: 400 * $precent;
      }
      > div:nth-child(6) {
        left: 560 * $precent;
      }
      > div:nth-child(7) {
        left: 710 * $precent;
      }
      .level1 {
        font-size: 18 * $precent;
        padding-top: 10 * $precent;
        color: yellow;
        text-shadow: 0 * $precent 0 * $precent 15 * $precent yellow;
        > div {
          color: yellow;
          margin-bottom: 22 * $precent;
          // font-size: 18*$precent;
        }
      }
      .level2 {
        opacity: 0.8;
        padding-top: 14 * $precent;
        > div {
          margin-bottom: 18 * $precent;
        }
      }
      .level2 div:nth-child(2) {
        font-size: 14 * $precent;
      }
      .level3 {
        padding-top: 14 * $precent;
        opacity: 0.4;
        > div {
          margin-bottom: 18 * $precent;
        }
      }
      .level3 div:nth-child(2) {
        font-size: 14 * $precent;
      }
      .data-left {
        color: #0cb7e5;
      }
      .data-right {
        color: #76ff83;
      }
    }
  }

  .arrow {
    position: absolute;
    // width: 100%;
    top: 48 * $precent;
    text-align: center;
    padding-right: 14 * $precent;
    font-size: 30 * $precent;
    z-index: 10;
    cursor: move;
    user-select: none;
    > img {
      height: 22 * $precent;
      width: 22 * $precent;
    }
    > img:nth-child(1) {
      margin-right: 12 * $precent;
    }
    > img:nth-child(2) {
      margin-left: 12 * $precent;
    }
  }
}
</style>  